<template name="product-item">
    <view class="container" @click="navigateTo(info)">
        <view v-if="info.type !== 'shop' && isShowTags=='1'" class="nft-tag"></view>
        <view class="mainimg">
            <image :src="info.thumImg? info.thumImg:info.mainImg"></image>
            <view class="sold" v-if="info.stock <= 0">
                <u-icon name="/static/icon_sold_out.png" size="140rpx"></u-icon>
            </view>
        </view>
        <view style="height: 80rpx;padding: 8rpx 0;">
            <u-text
                :text="info.name"
                size="28rpx"
                color="#000000"
                block
                :lines="2"
            ></u-text>
        </view>
        <view>
            <u-text
                size="36rpx"
                color="#356CE7"
                bold
                :text="info.price"
                prefixIcon="rmb"
                iconStyle="font-size: 22rpx; color: #356CE7; font-weight: bold;top: 10rpx;"
            ></u-text>
        </view>
    </view>
</template>

<script>
export default {
    name: "product-item",
    props: {
        info: {
            type: Object,
            default: {}
        }
    },
    computed: {
        isShowTags() {
            return this.$store.getters.isShowTags
        }
    },
    methods: {
        navigateTo(product) {
            uni.$u.route({
                url: product.type == 'nft' ? 'pages/nftDetail/index':'pages/productDetail/index',
                params: {
                    productId: product.id
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        display: block !important;
        background: #FFFFFF;
        //border: 1px solid #EEEEEE;
        margin-bottom: 20rpx;
        position: relative;
        .nft-tag {
            position: absolute;
            width: 100rpx;
            height: 40rpx;
            background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/967825cfb630bf72832c10b8d3ed3d64ad249bc8.png) no-repeat;
            background-size: 100% 100%;
            top: 26rpx;
            left: 16rpx;
            z-index: 1;
        }
        .mainimg {
            position: relative;
            //margin: 85rpx 45rpx 0 45rpx;
            image {
                width: 344rpx;
                height: 344rpx;
                border-radius: 20rpx;
            }
            .sold {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -70rpx;
                margin-left: -70rpx;
            }
        }
        .p-20 {
            padding-top: 15px 0;
        }
    }
</style>
